<template>
  <div class="login-box">
    <div id="animation" style="width: 100%; height: 98%"></div>
    <div class="frosted-glass">
      <a-form :model="formState" name="basic" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" autocomplete="off" @finish="onFinish" @finishFailed="onFinishFailed">
        <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
          <a-input v-model:value="formState.username" />
        </a-form-item>

        <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 0, span: 24 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import loginJson from '../../assets/json/login.json'
import {login} from '@/server/modules/user'
import { setToken } from '@/utils/auth'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
const router = useRouter()
onMounted(() => {
  setLottieFun() //设置登录页背景
})
function setLottieFun() {
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('animation'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: loginJson //导入用法
  })
}
//登录表单部分
const formState = reactive({
  username: 'admin',
  password: '123'
})
//表单成功校验
const onFinish = values => {
  console.log('Success:', values)
    message.success('登录成功', 3)
    router.push({ path: '/home/readExcelHeader' })
}
//表单失败校验
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo)
}

</script>

<style scoped>
.login-box {
  width: 100%;
  height: 100vh;
  position: relative;
}

.frosted-glass {
  position: absolute;
  top: 25%;
  right: 5%;
  width: 300px;
  padding: 20px;
  padding-top: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  color: white;
  text-align: center;
}
</style>
